<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 户型详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .card-shadow {
            box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="page bg-white min-h-screen pb-24">
        <!-- 头部图片部分 -->
        <div class="relative h-64">
            <!-- 轮播图片 -->
            <div class="swiper-container h-full">
                <div class="absolute inset-0">
                    <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80" alt="户型图片" class="w-full h-full object-cover">
                </div>
            </div>
            <!-- 返回按钮 -->
            <a href="floor-plan-list.html" class="absolute top-4 left-4 bg-black/30 rounded-full p-2 text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </a>
            <!-- 分享和收藏按钮 -->
            <div class="absolute top-4 right-4 flex space-x-3">
                <button class="bg-black/30 rounded-full p-2 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                    </svg>
                </button>
                <button class="bg-black/30 rounded-full p-2 text-white">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                    </svg>
                </button>
            </div>
            <!-- 指示器 -->
            <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
                <div class="w-2 h-2 rounded-full bg-white"></div>
                <div class="w-2 h-2 rounded-full bg-white/50"></div>
                <div class="w-2 h-2 rounded-full bg-white/50"></div>
            </div>
        </div>
        
        <!-- 户型基本信息 -->
        <div class="px-4 py-4">
            <div class="flex justify-between items-center mb-2">
                <h1 class="text-xl font-bold">豪华四房</h1>
                <div class="text-blue-600 font-medium">536万起</div>
            </div>
            
            <!-- 所属楼盘 -->
            <div class="text-sm text-gray-500 mb-4">
                御景豪庭 · 120㎡ · 南北通透
            </div>
            
            <!-- 标签 -->
            <div class="flex flex-wrap gap-2 mb-4">
                <span class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">双主卧</span>
                <span class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">中央空调</span>
                <span class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">飘窗</span>
                <span class="px-2 py-1 text-xs bg-blue-50 text-blue-600 rounded-full">干湿分离</span>
            </div>
            
            <!-- 价格信息卡片 -->
            <div class="bg-gray-50 rounded-lg p-4 mb-6 card-shadow">
                <div class="grid grid-cols-3 gap-4">
                    <div class="flex flex-col items-center">
                        <span class="text-gray-500 text-xs mb-1">总价</span>
                        <span class="text-blue-600 text-lg font-bold">536万</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-gray-500 text-xs mb-1">单价</span>
                        <span class="text-blue-600 text-lg font-bold">44,667元/㎡</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <span class="text-gray-500 text-xs mb-1">首付</span>
                        <span class="text-blue-600 text-lg font-bold">187.6万</span>
                    </div>
                </div>
            </div>
            
            <!-- 户型参数 -->
            <div class="mb-6">
                <h3 class="text-base font-medium mb-3 flex items-center">
                    <span class="w-1 h-5 bg-blue-600 rounded mr-2"></span>
                    户型参数
                </h3>
                <div class="grid grid-cols-2 gap-y-3 gap-x-4 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">建筑面积</span>
                        <span>120㎡</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">使用率</span>
                        <span>85%</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">套内面积</span>
                        <span>102㎡</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">层高</span>
                        <span>3.1米</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">朝向</span>
                        <span>南北通透</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">装修情况</span>
                        <span>精装修</span>
                    </div>
                </div>
            </div>
            
            <!-- 空间详情 -->
            <div class="mb-6">
                <h3 class="text-base font-medium mb-3 flex items-center">
                    <span class="w-1 h-5 bg-blue-600 rounded mr-2"></span>
                    空间详情
                </h3>
                <div class="overflow-x-auto scrollbar-hide">
                    <table class="w-full border-collapse">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="text-left py-2 pl-2 pr-4 text-xs text-gray-500 font-medium">空间</th>
                                <th class="text-left py-2 px-4 text-xs text-gray-500 font-medium">面积</th>
                                <th class="text-left py-2 px-4 text-xs text-gray-500 font-medium">朝向</th>
                                <th class="text-left py-2 px-4 text-xs text-gray-500 font-medium">特点</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr>
                                <td class="py-3 pl-2 pr-4 text-sm">客厅</td>
                                <td class="py-3 px-4 text-sm">28㎡</td>
                                <td class="py-3 px-4 text-sm">南</td>
                                <td class="py-3 px-4 text-sm">观景落地窗</td>
                            </tr>
                            <tr>
                                <td class="py-3 pl-2 pr-4 text-sm">主卧</td>
                                <td class="py-3 px-4 text-sm">18㎡</td>
                                <td class="py-3 px-4 text-sm">南</td>
                                <td class="py-3 px-4 text-sm">带卫浴、衣帽间</td>
                            </tr>
                            <tr>
                                <td class="py-3 pl-2 pr-4 text-sm">次卧1</td>
                                <td class="py-3 px-4 text-sm">14㎡</td>
                                <td class="py-3 px-4 text-sm">北</td>
                                <td class="py-3 px-4 text-sm">飘窗</td>
                            </tr>
                            <tr>
                                <td class="py-3 pl-2 pr-4 text-sm">次卧2</td>
                                <td class="py-3 px-4 text-sm">12㎡</td>
                                <td class="py-3 px-4 text-sm">北</td>
                                <td class="py-3 px-4 text-sm">书房功能</td>
                            </tr>
                            <tr>
                                <td class="py-3 pl-2 pr-4 text-sm">厨房</td>
                                <td class="py-3 px-4 text-sm">10㎡</td>
                                <td class="py-3 px-4 text-sm">北</td>
                                <td class="py-3 px-4 text-sm">中岛设计</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 户型优势 -->
            <div class="mb-6">
                <h3 class="text-base font-medium mb-3 flex items-center">
                    <span class="w-1 h-5 bg-blue-600 rounded mr-2"></span>
                    户型优势
                </h3>
                <div class="bg-blue-50 rounded-lg p-4">
                    <div class="space-y-3">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-0.5">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-2 text-sm">
                                <p class="text-gray-700">南北通透，居住舒适，通风采光俱佳</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-0.5">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-2 text-sm">
                                <p class="text-gray-700">双主卧设计，满足多代同堂或亲友居住需求</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-0.5">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-2 text-sm">
                                <p class="text-gray-700">大客厅设计，提供宽敞舒适的家庭活动空间</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-0.5">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>
                            <div class="ml-2 text-sm">
                                <p class="text-gray-700">卫生间干湿分离，增强使用便利性</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 实景图片 -->
            <div class="mb-6">
                <h3 class="text-base font-medium mb-3 flex items-center">
                    <span class="w-1 h-5 bg-blue-600 rounded mr-2"></span>
                    实景图片
                </h3>
                <div class="overflow-x-auto scrollbar-hide pb-2">
                    <div class="flex space-x-3">
                        <div class="flex-shrink-0 w-56 h-36 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" class="w-full h-full object-cover" alt="客厅">
                        </div>
                        <div class="flex-shrink-0 w-56 h-36 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" class="w-full h-full object-cover" alt="卧室">
                        </div>
                        <div class="flex-shrink-0 w-56 h-36 rounded-lg overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" class="w-full h-full object-cover" alt="厨房">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 猜你喜欢 -->
            <div class="mb-6">
                <h3 class="text-base font-medium mb-3 flex items-center">
                    <span class="w-1 h-5 bg-blue-600 rounded mr-2"></span>
                    同楼盘其他户型
                </h3>
                <div class="overflow-x-auto scrollbar-hide pb-2">
                    <div class="flex space-x-3">
                        <a href="floor-plan-detail.html" class="flex-shrink-0 w-40 border border-gray-200 rounded-lg overflow-hidden card-shadow">
                            <div class="p-3">
                                <div class="text-sm font-medium">两室一厅</div>
                                <div class="text-xs text-gray-500 mb-2">78㎡ | 南北通透</div>
                                <div class="text-xs text-blue-600">¥298万起</div>
                            </div>
                            <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="w-full h-24 object-cover" alt="户型图">
                        </a>
                        <a href="floor-plan-detail.html" class="flex-shrink-0 w-40 border border-gray-200 rounded-lg overflow-hidden card-shadow">
                            <div class="p-3">
                                <div class="text-sm font-medium">三室两厅</div>
                                <div class="text-xs text-gray-500 mb-2">106㎡ | 南北通透</div>
                                <div class="text-xs text-blue-600">¥398万起</div>
                            </div>
                            <img src="https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" class="w-full h-24 object-cover" alt="户型图">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部固定按钮 -->
        <div class="sticky bottom-16 left-0 right-0 bg-white border-t border-gray-100 shadow-md z-10 px-4 py-3 flex justify-between">
            <button onclick="document.getElementById('mortgageModal').classList.remove('hidden')" class="flex-1 bg-blue-50 text-blue-600 rounded-full py-2 mr-2 font-medium text-sm flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
                房贷计算
            </button>
            <button onclick="document.getElementById('appointmentModal').classList.remove('hidden')" class="flex-1 bg-blue-600 text-white rounded-full py-2 font-medium text-sm flex items-center justify-center shadow-lg shadow-blue-600/20">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                预约看房
            </button>
        </div>

        <!-- 电话咨询和在线咨询悬浮按钮 -->
        <div class="sticky bottom-32 right-0 z-10 flex flex-col items-center gap-2 ml-auto mr-4 w-max">
            <a href="tel:13800138000" class="bg-blue-600 text-white p-3 rounded-full shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
            </a>
            <a href="consultation.html" class="bg-blue-600 text-white p-3 rounded-full shadow-lg">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
            </a>
        </div>

        <!-- 底部导航 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20">
            <div class="grid grid-cols-5 h-16">
                <a href="index.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                    </svg>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="property-list.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                    </svg>
                    <span class="text-xs mt-1">楼盘列表</span>
                </a>
                <a href="floor-plan-list.html" class="flex flex-col items-center justify-center text-blue-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                    </svg>
                    <span class="text-xs mt-1">户型列表</span>
                </a>
                <a href="appointment.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                    <span class="text-xs mt-1">预约看房</span>
                </a>
                <a href="my.html" class="flex flex-col items-center justify-center text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </div>
</body>
</html>